<template>
    <el-card class="page-card">
        <template slot="header">
            <slot name="header">
                <div v-if="title || $slots.actions" class="header">
                    <div class="title">{{title}}</div>
                    <div v-if="$slots.actions" class="actions">
                        <slot name="actions"></slot>
                    </div>
                </div>
            </slot>
        </template>
        <slot />
    </el-card>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'page-card',
    props: {
        title: String
    }
})
</script>

<style scoped>
.page-card {
    margin: 16px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(251, 229, 187, 0.1);
    border-radius: 12px;
}

.page-card :deep .el-card__body {
    padding: 20px 20px 8px 20px;
}

.page-card :deep .el-card__header {
    padding: 0 20px;
}

.header {
    min-height: 64px;
    display: flex;
    align-items: center;
}
.title {
    flex: none;
}
.actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
</style>